<template>
  <div class="model-page">
    <div class="page-full-brandOne">
      <!-- 顶部 -->
      <topHeader title="麻将今日运势">
        <template v-slot:left :preventGoBack="preventGoBack" @on-click-back="onClickBack">
          <img src="static/image/public/i_back_white.png" alt="back_arrow" class="back-arrow">
        </template>
      </topHeader>
      <!-- 主体 -->
      <section class="brandOne_wrapper">
        <!-- logo -->
        <div class="logo_wrapper">
          <img src="../../../static/image/brandOperationOne/f_logo.png" alt="" srcset="">
        </div>
        <div class="userMsg">
          <div class="msg_wrap">
            <div class="con">
              <div class="item user_name">
                <label class="c_lab"><em>姓名</em>:</label>
                <div class="c_right">
                  <input class="uname" type="text" placeholder="请输入姓名" v-model="user_name">
                </div>
              </div>
              <div class="item user_sex">
                <label class="c_lab"><em>性别</em>:</label>
                <div class="c_right">
                  <div class="usex" :class="{'active':user_sex==1}" @click="user_sex=1">
                    <i></i>
                    <span>男</span>
                  </div>
                  <div class="usex" :class="{'active':user_sex==2}" @click="user_sex=2">
                    <i></i>
                    <span>女</span>
                  </div>
                </div>
              </div>
              <div class="item user_date">
                <div class="c_right">
                  <calendar
                    valueAlign="left"
                    default-str="请选择日期"
                    :birthDate="birthDate"
                    titleValue="出生日期:"
                    @getSelectDate="getBirthday"
                  />
                </div>
              </div>
            </div>
          </div>
          <button class="btn_wrap" @click="btn_submit()"></button>
        </div>
      </section>
    </div>

  </div>
</template>

<script>
import TopHeader from "@/components/topHeader";
import calendar from "@/components/calendar/calendar.vue";
import tool from '@/assets/js/tool';// 引入公共函数
export default {
  components:{
    TopHeader,
    calendar
  },
  data(){
    return{
        preventGoBack:true,
        user_name: window.localStorage.getItem("JMYC_USERNAME")||'', 
        user_sex: window.localStorage.getItem("JMYC_USERGENDER")||1, //1为男2为女
        userBirthInfo: "",
        birthDate: window.localStorage.getItem("JMYC_BIRTHDATE")?this.transformBirthDate():"",
    }
  },
  methods:{
    onClickBack(){
      this.$router.push('/index');
    },
    // 获取生日信息
    getBirthday: function(val) {
      this.userBirthInfo = val;
    },
    // 对缓存的日期进行处理
    transformBirthDate(){
        let date = window.localStorage.getItem('JMYC_BIRTHDATE')
        let noPoint = window.localStorage.getItem('JMYC_NOPOINT')
        return tool.handleBirthDate(date, noPoint, false)
    },
    // 获取性别信息
    btn_sex(val) {
      this.user_sex = val;
    },
     // 保存用户输入信息
    saveUserData() {
      window.localStorage.setItem("JMYC_USERNAME", this.user_name);
      window.localStorage.setItem("JMYC_USERGENDER", this.user_sex);
      if(this.userBirthInfo){
        let birthDay = this.handleTime(this.userBirthInfo.solarDate)
        window.localStorage.setItem("JMYC_BIRTHDATE",birthDay)
        window.localStorage.setItem("JMYC_NOPOINT",this.userBirthInfo.noPoint)
      }
    },
    btn_submit() {
      var totalConfig = {
        type: "text",
        text: "",
        position: "top",
        time: 1000
      };
      if(this.user_name == ''){
        totalConfig.text = '请输入姓名'
      } else if(!this.birthDate && !this.userBirthInfo){
        totalConfig.text = '请选择出生日期'
      }else{
        this.saveUserData()
        this.saveInfoToSql()
        return
      }
      this.$vux.toast.show(totalConfig)
    },
    // 对选择的日期进行处理 1993-4-4 04:00 转换为1993-04-04 04:00
    handleTime(time){
      // 将1993-4-4 04:00转换为时间戳
      let date = new Date(time.replace(/-/g,'/'))
      // 转换为时间戳 精确到秒
      let timeStap = date.getTime()/1000
      // 将时间戳转换为时间
      return tool.timestampToTime(timeStap)
    },
    // 将数据存入数据库
    saveInfoToSql(){
      this.$fetch
        .post("/app/Jmyc/user_edit", {
          // uid: '869115037298615,869115037349111',
          device: this.$store.state.userID,
          sex:  window.localStorage.JMYC_USERGENDER,
          birthday: window.localStorage.JMYC_BIRTHDATE,
          nopoint: window.localStorage.JMYC_NOPOINT,
          username:  window.localStorage.JMYC_USERNAME
        })
        .then(res => {
          if (res.code != 200 ) {
           this.$vux.toast.text('数据获取失败','top')
          }else{
            this.$router.push("/brandOperationTwo")
          }
        })
    }
  }
}
</script>
<style lang="less">
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
.page-full-brandOne{
  #calendarComponent{
    width: 100%;
    .weui-cells{
      background-color: transparent;
      &::before,&::after{
        display: none;
      }
      .weui-cell{
        padding: 0;
        height: 80px;
        .vux-cell-bd{
          width: initial;
          margin-right: 30px;
          >p{
            flex:0 0 132px;
            font-size: 30px;
            color: #167A4A;
            text-align:justify;
            text-align-last: justify;
            .vux-label{
              display: inline-block;
              width: 132px;
            }
          }
        }
      }
      .weui-cell_access{
        .weui-cell__ft{
          color: #0F4D2B!important;
          opacity: .5;
          font-size: 30px;
          &:after{
            display: none;
          }
        }
        &.active {
          .weui-cell__ft{
            color: #167A4A!important;
            opacity: 1;
          }
        }
      }
      .calendar-scroll-item{
        color: #333!important;
      }
    }
  }
} 
</style>


